<template>
  <div>
    <!-- <div class="item_title">
      <div>返回</div>
      <div>{{ movieObj.nm }}</div>
      <div></div>
    </div> -->
    <!-- 插槽 -->
    <header1>{{ movieObj.nm }}</header1>
    <header2></header2>
    <div class="itemcon">
      <img :src="movieObj.img" alt="" />
    </div>
    <div class="date-list">
      <ul>
        <!-- 2.时间列表添加 点击事件 ，传参数 -->
        <li
          v-for="(item, index) in dateArr"
          :key="item.date"
          @click="getCinemaData(item.date, index)"
          :class="index == activeid ? 'active' : ''"
        >
          {{ item.date | format(index) }}
        </li>
      </ul>
    </div>

    <!-- 影院信息 -->
    <ul class="cinemalist">
      <li v-for="item in cinemaArr" :key="item.id">{{ item.nm }}</li>
    </ul>
  </div>
</template>

<script>
/*
0. 获取 影院信息的函数
1.页面开始加载调用 影院信息
2.给 时间列表添加 点击事件 ，传参数
3.点击事件绑定的函数  
*/

import axios from "axios";
//引入头部组件
import header1 from "@/components/commonh/header1";
import header2 from "@/components/commonh/header2.vue";
export default {
  name: "item",
  data: function () {
    return {
      movieObj: {}, //电影的一条记录
      dateArr: [], //保存上映日期的数据
      cinemaArr: [], //影院信息
      id: 0, //电影id
      activeid: 0, //当前是第几天
    };
  },
  filters: {
    //过滤器  将 年月日转成  星期再加 月日
    //bug: 获取 今天的日期  ，和  传过来的日期比较
    format(value, index) {
      //console.log("过滤器触发了");
      var arr = value.split("-");
      var str = "";
      var jintian = ["今天", "明天", "后天"];
      if (index < 3) {
        str += jintian[index];
      } else {
        str += `周${"日一二三四五六".charAt(new Date(value).getDay())}`;
      }
      str += `${arr[1]}月${arr[2]}日`;
      return str;
    },
  },
  methods: {
    //3.重新获取影院数据
    getCinemaData(date, index) {
      //更改当前的日期
      this.activeid = index;
      this.getData(date);
    },
    //0.获取影院信息的函数
    getData(date) {
      axios
        .get(
          "/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId=" +
            this.id +
            "&serviceId=-1&stationId=-1&showDate=" +
            date +
            "&cityId=30&ci=30"
        )
        .then((res) => {
          //console.log(res);
          //获取了新数据会给  this.cinemaArr 重新赋值，页面就会重新渲染
          this.cinemaArr = res.data.data.cinemas;
        });
    },
  },
  mounted() {
    //获取 首页传过来的参数
    this.id = this.$route.params.id;
    axios.get("/api/mtrade/mmdb/movie/v5/" + this.id + ".json").then((res) => {
      console.log(res);
      this.movieObj = res.data.data.movie;
      this.movieObj.img = this.movieObj.img.replace("w.h", "110.150");
    });

    //获取 上映日期的数据
    axios
      .get(
        "/api/mtrade/mmcs/show/v1/movie/showdays.json?movieId=" +
          this.id +
          "&channelId=4&cityId=30"
      )
      .then((res) => {
        console.log(res);
        this.dateArr = res.data.data.dates;
        //1.获取影院信息
        this.getData(this.dateArr[0].date);
      });
  },
  components: {
    header1,
    header2,
  },
};
</script>

<style scoped>

.cinemalist li {
  width: 100%;
  height: 143px;
  background: lightgoldenrodyellow;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}
.date-list {
  width: 100%;
  height: 45px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  overflow: scroll;
}
.date-list ul {
  width: 1200px;
  display: flex;
}
.date-list ul li {
  width: 130px;
  height: 45px;
  line-height: 45px;
  text-align: center;
}
.date-list ul li.active {
  border-bottom: 2px solid #f03d37;
  color: #f03d37;
}
.item_title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #e54848;
  display: flex;
  justify-content: space-around;
}
.item_title div:nth-of-type(1),
.item_title div:nth-of-type(3) {
  width: 15%;
  text-align: center;
}
.item_title div:nth-of-type(2) {
  width: 70%;
  text-align: center;
}
</style>